<!-- 采购订单执行情况统计 -->
<template>
  <div class="app-container">
    <div class="search-and-button1" :class="{ showSearch: show }">
      <ImportFile url="/purchase/statistics/order/import" @getTableInfo="getTableInfo" />
      <el-button type="primary" plain :icon="!show ? 'el-icon-arrow-down' : 'el-icon-arrow-up'" @click="show = !show">查询条件</el-button>
      <el-button type="primary" icon="el-icon-search" @click="getTableInfo()">查询</el-button>
    </div>
    <transition name="el-zoom-in-top">
      <div v-show="show" class="more-search">
        <el-form :model="search" label-align="center" label-width="90px">
          <el-row>
            <el-col :xs="24" :xl="12" :md="12">
              <el-form-item label="订货日期" prop="beginDate">
                <el-date-picker v-model="search.planTime" style="width: 100%" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期时间" @change="getTableInfo()" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :xl="6" :md="6">
              <el-form-item label="单号" prop="objNo">
                <el-input v-model="search.objNo" placeholder="请输入采购单号进行搜索" clearable @keyup.enter.native="getTableInfo()" @clear="getTableInfo()" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :xl="6" :md="6">
              <el-form-item label="展示预付款" prop="advance">
                <el-switch v-model="value" active-color="#13ce66" inactive-color="#C0C0C0" @change="getTableInfo()"></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </transition>
    <el-row class="table">
      <el-table v-loading="loading" :data="tableData" ref="tableData" stripe border :span-method="objectSpanMethod">
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column align="center" type="index" label="索引" width="60px" />
        <el-table-column v-for="item in copyFieldList" :key="item.id" v-if="![...leaveHeader.numberHeader, ...leaveHeader.orderHeader].includes(item.val)" :align="item.align || 'left'" :prop="item.code.split(':')[1]" :label="item.val" :min-width="item.width + 'px'" show-overflow-tooltip>
          <template #default="{ row }">
            <div v-if="item.code.split(':')[1] === 'settle'">
              <i v-if="row[item.code.split(':')[1]] == '是'" class="el-icon-check" />
              <i v-else class="el-icon-close" />
            </div>
            <span v-else>{{ row[item.code.split(':')[1]] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="数量" align="center">
          <el-table-column v-for="item in copyFieldList" :key="item.id" v-if="leaveHeader.orderHeader.includes(item.val)" :align="item.align || 'left'" :prop="item.code.split(':')[1]" :label="item.val" :min-width="item.width + 'px'" show-overflow-tooltip />
        </el-table-column>
        <el-table-column label="金额" align="center">
          <el-table-column v-for="item in copyFieldList" :key="item.id" v-if="leaveHeader.numberHeader.includes(item.val)" :align="item.align || 'left'" :prop="item.code.split(':')[1]" :label="item.val" :min-width="item.width + 'px'" />
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <div class="table-btn-box">
        <el-button @click="
            () => {
              tableData.forEach(row => {
                $refs['tableData'].toggleRowSelection(row, true)
              })
            }
          ">选择全部</el-button>
        <el-button @click="
            () => {
              tableData.forEach(row => {
                $refs['tableData'].toggleRowSelection(row)
              })
            }
          ">反向选择</el-button>
        <el-button>
          更多菜单
          <i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
      </div>
      <pagination ref="Pagination" :total="total" :current.sync="search.current" :size.sync="search.size" @pagination="getTableInfo" />
    </el-row>
  </div>
</template>
<script>
import ImportFile from '@/components/ImportFile'
import Pagination from '@/components/Pagination'
export default {
  components: { Pagination, ImportFile },
  props: {
    fields: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      loading: false,
      tableData: [],
      total: 0,
      value: true,
      search: {
        advance: null,
        current: 1,
        size: 20,
        objNo: '',
        keyword: '',
        beginDate: '',
        endDate: '',
        planTime: [],
        treeStr: '-1'
      },
      leaveHeader: {
        numberHeader: ['币种', '预付款', '单价', '开票价', '付款', '应付'],
        orderHeader: ['订货', '入库', '开票数']
      },
      show: false,
      copyFieldList: []
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getTableInfo()
  },
  beforeDestroy() {
    window.onresize = null
  },
  methods: {
    getInfo(str) {
      this.search.treeStr = str
      this.getTableInfo(1)
    },
    timeDivide() {
      const { time } = this.search
      if (time && time.length) {
        this.search.beginDate = time[0]
        this.search.endDate = time[1]
      } else {
        this.search.beginDate = ''
        this.search.endDate = ''
      }
      this.search.advance = this.value === false ? 0 : 1
      const search = {
        ...this.search
      }
      delete search.time
      return search
    },
    /**
     * @description: page
     * @param {*} page
     * @return {*}
     */
    async getTableInfo(page = 1) {
      setTimeout(async () => {
        console.log(this.fields)

        this.copyFieldList = []
        let search = this.timeDivide()
        search.current = page
        this.fields.forEach((item) => {
          if (this.search.advance === 0 && item.val === '预付款') {
            item.isShow = false
          } else {
            item.isShow = true
          }
          if (item.isShow === true) this.copyFieldList.push(item)
        })
        console.log(this.copyFieldList)
        this.loading = true
        const res = await this.$axios.post('/purchase/stat/list', search)
        if (res?.data.code === 200) {
          setTimeout(() => {
            this.tableData = res.data.data.list
            this.getSpanArr(this.tableData)
            this.total = res.data.data.total
            this.loading = false
          }, 100)
        } else {
          this.loading = false
        }
      }, 200)
    },
    getSpanArr(data) {
      if (data.length > 0) {
        const spanArr = []
        for (var i = 0; i < data.length; i++) {
          if (i === 0) {
            spanArr.push(1)
            this.pos = 0
          } else {
            // 判断当前元素与上一个元素是否相同
            if (data[i].purchaseNo === data[i - 1].purchaseNo) {
              spanArr[this.pos] += 1
              spanArr.push(0)
            } else {
              spanArr.push(1)
              this.pos = i
            }
          }
        }
        this.spanArr = spanArr
      }
    },
    /** 单元格合并规则 */
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if ([3, 4, 5].includes(columnIndex)) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.app-container {
  padding: 0px;
}
.search-and-button1 {
  min-height: 33px;
  line-height: 30px;
  height: 30px;
  overflow: hidden;
  transition: height 0.3s;
  width: 100%;
  .el-input {
    width: 350px;
    float: right;
  }
}
.table {
  margin-top: 10px;
}
</style>
